<template>
  <div class="loginMain" :style="note">
    <!--<img src="../../assets/02.jpg" style="width: 100%;height: 100%">-->
    <div class="loginTitle">

    </div>
    <div class="loginName">
      雷甸党员积分红管家管理系统
    </div>
    <div class="loginContent">
      <div class="loginContentAssembly">
        <div class="loginContentAssemblyContent">

          <el-input type="button" v-model="username">
            <template slot="prepend" >用户名</template>
          </el-input>

          <el-input placeholder="请输入内容" v-model="userpwd" type="password">
            <template slot="prepend">新密码</template>
          </el-input>

          <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading"
                     style="width: 100%">确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .loginMain{
    width: 100%;
    height: 100%;
    min-height:98vh;
    background: rgba(0, 107, 211, 0.5);
    display:flex;
    justify-content: center;
    flex-direction: column;
  }

  .loginTitle{
    padding-top: 25px;
    background: rgba(0,0,0,0.1);
    width: 100%;
    display:flex;
    justify-content: center;
    flex-direction:column;
    align-items: center;
  }
  .loginName{
    background: rgba(0,0,0,0.1);
    display:flex;
    justify-content: center;
    flex-direction:column;
    align-items: center;
    color: white;
    font-size: 38px;
  }
  .loginContent{
    background: rgba(0,0,0,0.1);
    width: 100%;
    display:flex;
    flex-direction:column;
    align-items: center;
  }
  .loginContentAssembly{
    padding-top: 25px;
    width: 400px;
    height: 150px;
    display:flex;
    flex-direction:column;
    align-items: center;
  }

  .loginContentAssemblyContent{
    display:flex;
    flex-direction:column;
    align-items: center;
    width: 80%;
  }

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  div{
    width: 100%;
    align-content: center;
  }
</style>

<script>
  export default {
    data() {
      return {
        sid:'',
        username:'',
        userpwd: '',
        info10:'启用',
        select: '',
        fullscreenLoading: false,
      }
    },
    created(){
      this.keyupSubmit();
      this.get_user();
    },
    methods: {
      keyupSubmit(){
        document.onkeydown=e=>{
          let _key=window.event.keyCode;
          if(_key===13){
            this.openFullScreen()
          }
        }
      },
      openFullScreen() {
        this.fullscreenLoading = true;
        this.login();
      },
      login:function (username,userpwd,sid) {
        if(!this.username){
          this.$notify.error({
            title: '错误',
            message: '请输入账号'
          });
          this.fullscreenLoading = false;
          return;
        }
        if(!this.userpwd){
          this.$notify.error({
            title: '错误',
            message: '请输入新密码'
          });
          this.fullscreenLoading = false;
          return;
        }

        var params = {
          sid:this.sid,
          username:this.username,
          userpwd:this.userpwd,
          info10:this.info10,
        };
        //发送 post 请求
        this.$http.post(
          this.$BASE_URL+'user/updateByPrimaryKeySelective',
          {params},{emulateJSON:false}).then(function(res){
          console.log(res.body);
          if(res.body.status != 200){
            this.fullscreenLoading = false;
            this.$notify.success({
              title: '恭喜你',
              message: '修改成功',
              duration: 5000,

            });
            sessionStorage.clear();
            this.$router.push('/Login');

          }else{
            this.fullscreenLoading = false;
            console.log(res.body.user.sid);
            sessionStorage.setItem("accessToken", JSON.stringify(res.body.user));
            this.$router.push('/Login');
          }
        },function(res){
          this.fullscreenLoading = false;
          this.$notify.error({
            title: '错误',
            message: "服务器连接故障！",
            duration: 5000
          });
          console.log(res);
        });
      },
      //获取用户信息
      get_user(){
        var accessToken = JSON.parse(sessionStorage.getItem('accessToken'));
        this.username = accessToken.username;
        this.sid=accessToken.sid;
      }
    }
  }
</script>
